<template>
  <div class="edit">
    <div class="form_box">
      <!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
      <u--form
        labelPosition="left"
        :model="model1"
        :rules="rules"
        ref="form1"
      >
        <div
          class="modele1"
          style="background: white; width: 100%; padding: 0px 10px"
        >
          <!-- 实名信息 -->
          <div class="cell1">
            <u--image
              :showLoading="true"
              :src="src"
              width="15px"
              height="22px"
            ></u--image>
            <u--text text="实名信息"></u--text>
          </div>
          <!-- 姓名 -->
          <u-form-item
            borderBottom
            ref="item1"
          >
            <template slot="label">
              <div :style="{ marginLeft: '10px', width: '9  0px' }">
                姓名 ：
              </div>
            </template>
            <u--input
              v-model="model1.userInfo.name"
              border="none"
              placeholder="请输入姓名"
              disabled
            ></u--input>
          </u-form-item>
          <!-- 曾用名 -->
          <u-form-item
            borderBottom
            ref="item1"
          >
            <template slot="label">
              <div :style="{ marginLeft: '10px', width: '9  0px' }">
                曾用名 ：
              </div>
            </template>
            <u--input
              v-model="model1.userInfo.name2"
              border="none"
              placeholder="请输入曾用名"
            ></u--input>
          </u-form-item>
          <!-- 证件号码 -->
          <u-form-item
            borderBottom
            ref="item1"
          >
            <template slot="label">
              <div :style="{ marginLeft: '10px', width: '9  0px' }">
                证件号码 ：
              </div>
            </template>
            <u--input
              v-model="model1.userInfo.sfz"
              border="none"
              placeholder="请输入证件号码"
              disabled
            ></u--input>
          </u-form-item>
          <!-- 民族 -->
          <u-form-item
            borderBottom
            ref="item1"
          >
            <template slot="label">
              <div :style="{ marginLeft: '10px', width: '9  0px' }">
                民族 ：
              </div>
            </template>
            <u--input
              v-model="model1.userInfo.minzu"
              border="none"
              placeholder="请输入民族"
            ></u--input>
          </u-form-item>
          <!-- 籍贯 -->
          <u-form-item
            borderBottom
            ref="item1"
          >
            <template slot="label">
              <div :style="{ marginLeft: '10px', width: '9  0px' }">
                籍贯 ：
              </div>
            </template>
            <u--input
              v-model="model1.userInfo.jiguan"
              border="none"
              placeholder="请输入籍贯"
            ></u--input>
          </u-form-item>
          <!-- 政治面貌 -->
          <u-form-item
            borderBottom
            ref="item1"
          >
            <template slot="label">
              <div :style="{ marginLeft: '10px', width: '9  0px' }">
                政治面貌 ：
              </div>
            </template>
            <u--input
              v-model="model1.userInfo.zzmm"
              border="none"
              placeholder="请输入政治面貌"
            ></u--input>
          </u-form-item>
        </div>
        <div
          class="modele1 modele2"
          style="
            background: white;
            width: 100%;
            padding: 0px 10px;
            margin-top: 10px;
          "
        >
          <!-- 联系方式 -->
          <div class="cell1">
            <u--image
              :showLoading="true"
              :src="src"
              width="15px"
              height="22px"
            ></u--image>
            <u--text text="联系方式"></u--text>
          </div>
          <!-- 手机 -->
          <u-form-item
            borderBottom
            ref="item1"
          >
            <template slot="label">
              <div :style="{ marginLeft: '10px', width: '9  0px' }">
                手机 ：
              </div>
            </template>
            <u--input
              v-model="model1.userInfo.phone"
              border="none"
              placeholder="请输入手机"
              disabled
            ></u--input>
          </u-form-item>
          <!-- 邮箱 -->
          <u-form-item
            borderBottom
            ref="item1"
          >
            <template slot="label">
              <div :style="{ marginLeft: '10px', width: '9  0px' }">
                邮箱 ：
              </div>
            </template>
            <u--input
              v-model="model1.userInfo.email"
              border="none"
              placeholder="请输入邮箱"
            ></u--input>
          </u-form-item>
          <!-- 微信号 -->
          <u-form-item
            borderBottom
            ref="item1"
          >
            <template slot="label">
              <div :style="{ marginLeft: '10px', width: '9  0px' }">
                微信号 ：
              </div>
            </template>
            <u--input
              v-model="model1.userInfo.wexin"
              border="none"
              placeholder="请输入微信号"
            ></u--input>
          </u-form-item>
          <!-- 居住地 -->
          <u-form-item
            borderBottom
            ref="item1"
          >
            <template slot="label">
              <div :style="{ marginLeft: '10px', width: '9  0px' }">
                居住地 ：
              </div>
            </template>
            <u--input
              v-model="model1.userInfo.address"
              border="none"
              placeholder="请输入居住地"
            ></u--input>
          </u-form-item>
        </div>
        <div
          class="modele1"
          style="
            background: white;
            width: 100%;
            padding: 0px 10px;
            margin-top: 10px;
          "
        >
          <!-- 教育经历 -->
          <div class="cell1">
            <u--image
              :showLoading="true"
              :src="src"
              width="15px"
              height="22px"
            ></u--image>
            <u--text text="教育经历"></u--text>
          </div>
          <!-- 毕业院校 -->
          <u-form-item
            label="毕业院校 ："
            prop="userInfo.yuanxiao"
            borderBottom
            ref="item1"
            leftIcon="*"
            labelWidth="100px"
            :leftIconStyle="{ color: 'red' }"
          >
            <u--input
              v-model="model1.userInfo.yuanxiao"
              border="none"
              placeholder="请输入毕业院校"
            ></u--input>
          </u-form-item>
          <!-- 毕业专业 -->
          <u-form-item
            label="毕业专业 ："
            prop="userInfo.zhuanye"
            borderBottom
            ref="item1"
            leftIcon="*"
            labelWidth="100px"
            :leftIconStyle="{ color: 'red' }"
          >
            <u--input
              v-model="model1.userInfo.zhuanye"
              border="none"
              placeholder="请输入毕业专业"
            ></u--input>
          </u-form-item>
        </div>
        <div
          class="modele1"
          style="
            background: white;
            width: 100%;
            padding: 0px 10px;
            margin-top: 10px;
          "
        >
          <!-- 都安高中工作经历(教职工填写) -->
          <div class="cell1">
            <u--image
              :showLoading="true"
              :src="src"
              width="15px"
              height="22px"
            ></u--image>
            <u--text text="都安高中工作经历(教职工填写)"></u--text>
          </div>
          <!-- 入职年份 -->
          <u-form-item
            label="入职年份 ："
            prop="userInfo.ruzhi"
            borderBottom
            ref="item1"
            leftIcon="*"
            labelWidth="100px"
            :leftIconStyle="{ color: 'red' }"
          >
            <u--input
              v-model="model1.userInfo.ruzhi"
              border="none"
              placeholder="请输入入职年份"
            ></u--input>
          </u-form-item>
          <!-- 教研组 -->
          <u-form-item
            label="教研组 ："
            prop="userInfo.jiaoyanzu"
            borderBottom
            ref="item1"
            leftIcon="*"
            labelWidth="100px"
            :leftIconStyle="{ color: 'red' }"
          >
            <u--input
              v-model="model1.userInfo.jiaoyanzu"
              border="none"
              placeholder="请输入教研组"
            ></u--input>
          </u-form-item>
          <!-- 离职年份 -->
          <u-form-item
            borderBottom
            ref="item1"
          >
            <template slot="label">
              <div :style="{ marginLeft: '10px', width: '9  0px' }">
                离职年份 ：
              </div>
            </template>
            <u--input
              v-model="model1.userInfo.lizhi"
              border="none"
              placeholder="请输入离职年份"
            ></u--input>
          </u-form-item>
        </div>
      </u--form>
    </div>
    <!-- 按钮区 -->
    <div
      class="btn_box"
      style="margin-top: 20px"
    >
      <button
        class="btn"
        type="primary"
        @click="formSubmit"
      >保存</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      src: require("@/static/index/shuxian.png"),
      model1: {
        userInfo: {
          name: "王芳", //姓名
          name2: "王小芳", //曾用名
          sfz: "431023199909147511", //身份证
          minzu: "汉族", //民族
          jiguan: "都安安阳县", //籍贯
          zzmm: "群众", //政治面貌
          phone: "13037354303", //手机
          email: "dougao@test.com", //邮箱
          wexin: "", //微信号
          address: "", //省市区
          // address2: "", //详细地址
          yuanxiao: "", //毕业院校
          zhuanye: "", //毕业专业
          jiaoyanzu: "", //教研组
          lizhi: "", //离职年份
        },
      },
      rules: {
        //表单校验
        "userInfo.yuanxiao": {
          type: "string",
          required: true,
          message: "请填写毕业院校",
          trigger: ["blur", "change"],
        },
        "userInfo.zhuanye": {
          type: "number",
          required: true,
          message: "请填写毕业专业",
          trigger: ["blur", "change"],
        },
        "userInfo.ruzhi": {
          type: "string",
          required: true,
          message: "请填写入职年份",
          trigger: ["blur", "change"],
        },
        "userInfo.jiaoyanzu": {
          type: "string",
          required: true,
          message: "请填写教研组",
          trigger: ["blur", "change"],
        },
      },
    };
  },
  methods: {
    formSubmit() {
      let data = this.model1.userInfo;
      this.$refs.form1
        .validate()
        .then((res) => {
          uni.showToast({
            title: "保存成功！",
            duration: 2000,
            success: () => {
              setTimeout(() => {
                console.log(data, res);
                uni.reLaunch({
                  url: `/pages/personal/personal`,
                });
              }, 600);
            },
          });
        })
        .catch((errors) => {
          uni.$u.toast("请完成表单！");
          console.log(data, "222e2e");
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.edit {
  // 表单
  .form_box {
    box-sizing: border-box;
    background: #eef2fb;
    .cell1 {
      padding: 10px 0px;
      display: flex;
      border-bottom: 1px solid #e8e9ea;
      box-sizing: border-box;
    }
    .cell_join {
      padding: 10px 0;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      padding-right: 15px;
      align-items: center;
    }
  }
  // 按钮区
  .btn_box {
    padding: 10px;
    box-sizing: border-box;

    .btn {
      background: #1990ff;
      color: white;
      border-radius: 10px;
    }
  }
}
</style>